import { useEffect } from "react";
import { App, Popconfirm } from "antd";
import { Button, Card as SemiCard, ButtonGroup, List } from "@douyinfe/semi-ui";
import { IconRefresh, IconDelete, IconEdit } from "@douyinfe/semi-icons";
import { useModel } from "umi";

import useHelperGateway from "../../helper/useHelperGateway";

import useAllGateways from "../../hooks/person/useAllGateways";
import useDeleteGatewayInfo from "../../hooks/person/useDeleteGatewayInfo";

const GatewayCard = ({ cardBodyHeight }) => {
    const { message } = App.useApp();
    const { baseInfo } = useModel("person.info");
    const { setCurrentGateway, selectedGateway } = useModel("gateway.info");
    const { openAddGatewayModal, openEditGatewayModal } = useHelperGateway();

    const { loading, gateways, loadPersonGateways } = useAllGateways(baseInfo?.uuid);
    const { loading: deleteLoading, deletePersonGateway } = useDeleteGatewayInfo();

    useEffect(() => {
        if (gateways && gateways.length > 0) {
            setCurrentGateway(gateways[0]);
        }
    }, [gateways]);

    const deleteGateway = async (currGateway) => {
        deletePersonGateway(currGateway.uuid, (res) => {
            if (res) {
                message.success("成功删除网关信息");
                loadPersonGateways();
            }
        });
    };

    return (
        <SemiCard
            title={<span style={{ lineHeight: "32px", fontSize: 15 }}>个人网关列表</span>}
            headerExtraContent={
                <ButtonGroup>
                    {/* <Button icon={<IconPlusCircle onClick={() => openAddGatewayModal(gateways, loadPersonGateways)} />}></Button> */}
                    <Button icon={<IconRefresh onClick={loadPersonGateways} />}></Button>
                </ButtonGroup>
            }
            headerStyle={{ padding: "10px 14px" }}
            shadows="always"
            bordered={false}
            bodyStyle={{ padding: 1, height: cardBodyHeight - 2, overflow: "auto" }}
        >
            <List
                loading={loading}
                dataSource={gateways}
                renderItem={(item, index) => (
                    <List.Item
                        key={index}
                        className={`list-item ${selectedGateway?.uuid === item?.uuid ? "list-item-selected" : ""}`}
                        style={{ padding: "12px 12px 12px 24px" }}
                        main={
                            <div>
                                <div style={{ color: "var(--semi-color-text-0)", fontWeight: 500 }}>{item?.notes || "-"}</div>
                                {item?.url}
                            </div>
                        }
                        extra={
                            <ButtonGroup theme="borderless">
                                <Button icon={<IconEdit />} onClick={() => openEditGatewayModal(item, loadPersonGateways)} />
                                {item.isDefault !== true && (
                                    <Popconfirm title="确认要移除该个人网关的信息?" okButtonProps={{ loading: deleteLoading }} onConfirm={() => deleteGateway(item)}>
                                        <Button theme="borderless" icon={<IconDelete style={{ color: "#E91E63" }} />} />
                                    </Popconfirm>
                                )}
                            </ButtonGroup>
                        }
                        onClick={() => setCurrentGateway(item)}
                    ></List.Item>
                )}
            />
        </SemiCard>
    );
};

export default GatewayCard;
